<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>更换密码</title>
    <style>
        .password-pane {
            width: 400px;
            margin: 0 auto;
            margin-top: 50px;
            padding: 20px;
            background: rgba(255, 255, 255, .7);
            border-radius: 10px;
        }

        .login-title {
            width: 100%;
            height: 60px;
        }

        .layui-input {
            border-radius: 5px;
        }

        .layui-btn {
            border-radius: 5px;
        }
    </style>
</head>
<body>
<!-- 头部引入头部页面 -->
<div th:replace="user/header :: header"></div>
<!-- 内容主体 -->
<div>
    <div class="password-pane">
        <div class="login-title">
            <div style="font-size: 20px;margin: 0 auto;width: fit-content;">更换密码</div>
        </div>
        <form class="layui-form layui-form-pane" action="#">
            <div class="layui-form-item">
                <label class="layui-form-label">原 密 码</label>
                <div class="layui-input-block">
                    <input type="password" name="oldPassword" placeholder="旧密码" autocomplete="off" lay-verify="pass"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新 密 码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" placeholder="新密码" autocomplete="off" lay-verify="pass"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" name="rePassword" placeholder="再次输入新密码" autocomplete="off" lay-verify="pass"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="*">立即更换</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

</div>

<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'jquery', 'element'], function () {
        var layer = layui.layer
            , form = layui.form
            , $ = layui.jquery;
        // 表单验证
        form.verify({
            pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
        });

        // 表单提交
        form.on('submit(*)', function (data) {
            if (data.field.password !== data.field.rePassword) {
                layer.msg("密码不一致");
                return false;
            }
            $.ajax({
                url: "./update/password",
                type: "POST",
                data: data.field,
                success: function (data) {
                    if (data.status === 200) {
                        layer.msg("更换密码成功, 即将重新登录");
                        setInterval(function () {
                            window.location.href = "../index.html"
                        }, 1500);
                    } else if (data.status === 201) {
                        layer.msg(data.data)
                    }
                },
                error: function (xhr, status, error) {
                    if (xhr.status === 400) {
                        layer.msg("密码格式有误")
                    } else {
                        layer.error("网络请求失败")
                    }
                }
            });
            return false; //阻止表单跳转。
        });
    });
</script>

</body>
</html>